<template>
  <div ref="contact" class="content2">
    <div class="title display-flex align-items-center justify-content-center">
      <h2 class="display-flex align-items-center justify-content-center">
        <img class="serverIcon" src="../../../assets/contact_icon.png" alt>
        <span>联系我们</span>
        <span>/</span>
      </h2>
      <p>有什么想对我们说的？</p>
    </div>
    <div class="advise2">
      <p class="advise">您有什么宝贵的意见或建议？</p>
      <p class>如果你有相关业务需求，可直接与我们取得联系洽谈，如有合作事项，可直接致电我们洽谈。</p>
      <p class>如果你对我们的职位感兴趣,且符合我们的基本要求，请将个人简历投递至xiaoyazeibai@163.com或者直接与我们取得联系！</p>
    </div>
    <div class="bot display-flex justify-content-space-between">
      <div class="botLeft display-flex flex-direction-column">
        <input class="botItem" type="text" placeholder="你的姓名">
        <input class="botItem" type="text" placeholder="你的电子邮箱">
        <input class="botItem" type="text" placeholder="你的手机号码">
        <textarea class="botTalk" placeholder="想对我们说些什么？"></textarea>
      </div>
      <div class="botRig">
        <ol>
          <li>
            <span></span>
            <p>联系人：蒋先生</p>
          </li>
          <li>
            <span></span>
            <p>联系电话：15087138020</p>
          </li>
          <li>
            <span></span>
            <p>Email:xiaoyazeibai@163.com</p>
          </li>
          <li>
            <span></span>
            <p>邮政编码：650000</p>
          </li>
          <li>
            <span></span>
            <p>公司地址：云南省昆明市经开区云景路168号银河T—PARK银河之星科技园K栋8楼</p>
          </li>
        </ol>
      </div>
    </div>
    <div class="footer">
      <p class="copyright">© 2017 昆明爱开门网络科技有限公司</p>
      <span>滇ICP备17006324号</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Contact",
  mounted:function(){
    this.$store.commit('setContact',this.$refs['contact'])
  }
};
</script>
<style scoped>
.content2 {
  width: 100%;
  /* height: 11.8rem; */
  padding: 0 2rem;
  padding-top: 0.3rem;
  background: #2d3d4c;
  color: #fff;
}
.title {
  font-size: 0.33rem;
}
.title > p {
  position: relative;
  top: 0.07rem;
}
.title > h2 > img {
  width: 0.6rem;
}
.advise {
  font-size: 0.4rem;
  margin-bottom: 0.4rem;
}
.advise2 {
  font-size: 0.23rem;
  border-bottom: 1px solid #fff;
  padding: 0.8rem 0.3rem 0.4rem;
}
.botLeft {
  width: 46%;
}
.botItem {
  height: 0.7rem;
  margin-top: 0.5rem;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding-left: 0.2rem;
  font-size: 0.3rem;
}
.botTalk {
  margin-top: 0.5rem;
  height: 3rem;
  background: transparent;
  border: 1px solid #fff;
  padding-left: 0.2rem;
  font-size: 0.3rem;
}
input::-webkit-input-placeholder {
  color: #fff;
}
input::-moz-placeholder {
  color: #fff;
}
input::-ms-input-placeholder {
  color: #fff;
}
.botTalk::-webkit-input-placeholder {
  color: #fff;
}
.botTalk::-moz-placeholder {
  color: #fff;
}
.botTalk::-ms-input-placeholder {
  color: #fff;
}
.footer {
  color: #fff;
  text-align: center;
  font-size: 0.24rem;
  padding: 0.3rem 0;
}
.botRig{
  width: 46%;
}
.botRig ol{
  font-size: 0.24rem;
  list-style-type:disc;
  margin-top: 0.5rem;
}
.botRig ol li{
  margin-bottom: 0.5rem;
}
</style>
